<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">
				<image src="/static/images/index.png" mode="aspectFill" style="width: 240upx;height: 60upx;"></image>
			</block>
		</cu-custom>
		
		<swiper class="card-swiper" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="uni-swiper-msg">
			<view class="uni-swiper-msg-icon">
				<image src="/static/images/inform.png" mode="widthFix" style="width:35upx;height:35upx;margin-top:15upx;margin-left:5px;"></image>
			</view>
			<swiper autoplay="true" circular="true" interval="5000" style="margin-top: 5upx;">
				<swiper-item v-for="(item, index) in msg" :key="index">
					<navigator>{{item}}</navigator>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="uni-common-mt">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></uni-segmented-control>
		</view>
		<view class="cardcontent">
			<view v-show="current === 0">
				<view class="page-section page-section-gap">
					<map style="width:100%; height:500px;" :latitude="latitude" :longitude="longitude">
					</map>
					<cover-image class="img" :style="controlsRunStyle" @click="run" src="/static/images/run.png"></cover-image>
				</view>
			</view>
			<view v-show="current === 1">
				<view class="page-section page-section-gap">
					<map style="width:100%;height:500px;" :latitude="latitude" :longitude="longitude">
					</map>
					<cover-image class="img" :style="controlsRunStyle" @click="bicycl" src="/static/images/bike.png"></cover-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniFab from '@/components/uni-fab.vue';
	export default {
		components: {
			uniSegmentedControl,
			uniFab
		},
		data() {
			return {
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/9/B3/A7/7B3BCAAD241ADB48A83A85B81A6_D64F2472_4396C.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/C/DF/23/5BE40EA6EED4E908F151B168CC0_6E3E16BF_22819.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/1/0C/7A/EF5675BC6A888776400BF1E16F2_BE461ADF_1E725.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/F/26/F2/06C20B597D0185D85B2474D0F41_A1FF5BFA_2014E.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/3/FD/B9/7175D860A7A1207D69FF802255C_42CB6C29_203C6.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'http://www.lzjtu.edu.cn/__local/F/24/E5/606E2F8F705BF2C46D4C1FE3621_E7E0D097_11D4A.jpg'
				}],
				msg : [
					'兰州交通大学第五十一届运动会精彩开幕!',
					'我校举办“青春之歌献祖国”拉歌活动!'
				],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				
				latitude: 39.909,
				longitude: 116.39742,
				items: [
					'跑步',
					'骑行'
				],
				current: 0,
				colorIndex: 0,
				activeColor: '#058BF2',
				styleType: 'button',
				
				controlsRunStyle: ''
			};
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
		},
		onShow() {
			this.getMyLocation();
			this.initView();
		},
		methods: {
			getMyLocation:function(){
				var me = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						me.latitude = res.latitude;
						me.longitude = res.longitude;
					}
				});
			},
			
			initView:function(){
				var me = this;
				uni.getSystemInfo({
					success: function (res) {
						var screenWidth = res.screenWidth;
						me.controlsRunStyle = "left: "+ (screenWidth/2 - 40) +"px;";
					}
				});
			},
			
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			
			run(){
				var me = this;
				var user = uni.getStorageSync('user');
				if(user == null || user == ""){
					uni.showModal({
						title: '提示',
						content: '您还未登录',
						cancelText: '不登录',
						cancelColor: "#E0152E",
						confirmText:'前往登录',
						confirmColor: '#1AA034',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/home/authorize'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/sport/countDown?type=1'
					});
				}
			},
			
			bicycl(){
				var me = this;
				var user = uni.getStorageSync('user');
				if(user == null || user == ""){
					uni.showModal({
						title: '提示',
						content: '您还未登录',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/sport/countDown?type=2'
					});
				}
				
			},
			
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	view {
		font-size: 28upx;
		line-height: inherit
	}
	
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	
	.card-swiper {
		height: 320upx !important;
	}
	
	.card-swiper swiper-item {
		padding: 10upx 0upx 0upx;
	}
	
	.cardcontent{
		padding-top: 30upx;
	}
	
	.img {
	    position: absolute;
	    width: 80px;
	    height: 80px;
	    margin-top: -400px;
	}
</style>
